<template>
  <div class="p-4">
    <a-card :bordered="false" style="height: 100%">
      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
        <a-tab-pane key="MyFromComponents" tab="营业时间组件"></a-tab-pane>
      </a-tabs>
      <component :is="currentComponent"></component>
    </a-card>
  </div>
</template>
<script lang="ts">
import {computed, defineComponent, ref} from 'vue';
import MyFromComponents from './MyFromComponents.vue';

export default defineComponent({
    name: 'comp-mysq-basic',
    setup() {
      const activeKey = ref('MyFromComponents');
      const currentComponent = computed(() => {
        const componentType = {
          MyFromComponents: MyFromComponents,
        };
        return componentType[activeKey.value];
      });

      //使用component动态切换tab
      function tabChange(key) {
        activeKey.value = key;
      }
      return {
        activeKey,
        currentComponent,
        tabChange,
      };
    },
  });
</script>
